<template>
	<view class="gy-address-card gy-custom-card" @click.stop="showSelect = true">
	    <view v-if="props.modelValue" class="gy-address-info">
	        <view class="gy-address-region">
				{{ props.modelValue.provinceName }}{{ props.modelValue.cityName }}{{ props.modelValue.countyName }}
			</view>
	        <view class="gy-address-details">{{ props.modelValue.address }}</view>
	        <view class="gy-address-user">
	            <view class="gy-address-user-name">{{ props.modelValue.person }}</view>
	            <view class="gy-address-user-phone">{{ props.modelValue.mobile }}</view>
	        </view>
	    </view>
	    <view v-if="!props.modelValue" class="gy-address-placeholder">请选择地址</view>
	    <view class="gy-address-arrow gy_icon_arrowRight"></view>
	</view>
	<com-address-select v-if="showSelect" :address="props.modelValue" @close="showSelect = false" @select="selectFn" />
</template>

<script lang="ts" setup>

	import {
		ref
	} from 'vue';

	const emits = defineEmits(["update:modelValue", "change"]);

	const props = defineProps({
		modelValue: {
			type: Object
		}
	});

	const showSelect = ref(false);

	function selectFn(item: any){
		emits("update:modelValue", JSON.parse(JSON.stringify(item)));
		emits("change");
	}

</script>

<style lang="scss" scoped>
	.gy-address-card{
		@include flex-between-center;
		font-size: var(--gy-font-size-medium);
		.gy-address-info{
		    width: calc(100% - 60rpx);
		    color: var(--gy-text-color-primary);
		    .gy-address-region{}
		    .gy-address-details{
		        margin-top: 15rpx;
		        font-size: var(--gy-font-size-base);
		        color: var(--gy-text-color-secondary);
				vertical-align: middle;
		    }
		    .gy-address-user{
		        margin-top: var(--gy-gap);
		        @include flex-start-center;
		        .gy-address-user-name{
		            margin-right: var(--gy-gap);
		        }
		        .gy-address-user-phone{
		            color: var(--gy-text-color-secondary);
		        }
		    }
		}
		.gy-address-placeholder{
			width: calc(100% - 60rpx);
			font-size: var(--gy-font-size-medium);
			color: var(--gy-text-color-placeholder);
		}

		.gy-address-arrow{
		    width: 60rpx;
		    @include flex-end-center;
		    color: var(--gy-text-color-secondary);
		    font-size: var(--gy-font-size-base);
		}
	}
</style>
